﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Windows Mobile Widget Emulator</title>
    <link href="assets/wm.css" rel="stylesheet" type="text/css" />
    <script src="assets/Devices.js" type="text/javascript"></script>
    <script src="assets/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="assets/WindowsMobileEmulator.js" type="text/javascript"></script>

</head>
<body>
    <div id="container">
    <h1>Widget Emulator</h1>
        <div id="emulatorInformationContainer">
            <fieldset>
                <legend>Settings</legend>
                <div>
                    <select id="resolution">
                        <option value="pro-6">Change resolution...</option>
                        <optgroup id="resolution-professional" label="Professional"></optgroup>
                        <optgroup id="resolution-standard" label="Standard"></optgroup>
                    </select>
                </div>
                <div class="showMode">
                    <button id="portrait">Portrait</button>
                    <button id="landscape">Landscape</button>
                </div>
            </fieldset>
            <fieldset>
            <legend>Information</legend>
                <ul>
                    <li>
                        <span class="type">Name:</span>
                        <span id="device-name"></span>
                    </li>
                    <li>
                        <span class="type">Width:</span>
                        <span id="device-width"></span>
                    </li>
                    <li>
                        <span class="type">Height:</span>
                        <span id="device-height"></span>
                    </li>
                    <li>
                        <span class="type">DPI:</span>
                        <span id="device-dpi"></span>
                    </li>
                    <li>
                        <span class="type">Square:</span>
                        <span id="device-square"></span>
                    </li>
                    <li>
                        <span class="type">Portrait:</span>
                        <span id="device-portrait"></span>
                    </li>
                    <li>
                        <span class="type">Landscape:</span>
                        <span id="device-landscape"></span>
                    </li>
                    <li>
                        <span class="type">Small icon:</span>
                        <span id="device-smallIcon"></span>
                    </li>
                    <li>
                        <span class="type">Large icon:</span>
                        <span id="device-largeIcon"></span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="emulatorContainer">
            <iframe src="widgets/RSSReader/index.html" id="emulator" width="480" height="800">
            </iframe>
            <div id="menus">
            <input type="button" id="leftKey" value="Left key" />
            <input type="button" id="rightKey" value="Right key" />
                <ul id="leftMenu">
                </ul>
                <ul id="rightMenu">
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
